<template>
  <swiper
      :loop="true"
      :centeredSlides="true"
      :pagination="{ clickable: true}"
      :speed="1500"
      :autoplay="{ delay: 2000, disableOnInteraction: false}"
      :modules="[EffectFade, Pagination]"
      class="swiper max-w-screen-xl h-48 ">
    <swiper-slide class="border flex justify-center items-center relative overflow-clip">
      <img src="../assets/carousel/img.png" alt="" class="w-full h-full absolute object-cover">
    </swiper-slide>
    <swiper-slide class="border flex justify-center items-center relative overflow-clip">
      <img src="../assets/carousel/img_1.png" alt="" class="w-full h-full absolute object-cover">
    </swiper-slide>
    <swiper-slide class="border flex justify-center items-center relative overflow-clip">
      <img src="../assets/carousel/img_2.png" alt="" class="w-full h-full absolute object-cover">
    </swiper-slide>
    <swiper-slide class="border flex justify-center items-center ">
      <img src="../assets/carousel/img_3.png" alt="" class="w-full h-full absolute object-cover">
    </swiper-slide>
  </swiper>
</template>

<script setup lang="ts">

import {EffectFade, Pagination, Parallax} from "swiper";
import {Swiper, SwiperSlide} from "swiper/vue";
import {Motion} from "@motionone/vue";
import 'swiper/swiper-bundle.css';
import {onMounted} from "vue";
import {animate} from "motion";

onMounted(()=>{

})





</script>

<style scoped>

</style>